$(function () {
    var currentPage = 1, currentSize = 10;
    //定义的全局变量filted_data 用来才存放ajax那边返回来的数据，那边的数据是一个 JSON

    var filted_data = [];


    /***
    function myfun() {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {  //这儿还没理解
            if (xhr.readyState == 4 && xhr.status == 200) {
                var data = xhr.responseText;
                var data_Json = JSON.parse(data);
                var results = data_Json.result;
    
                var i, x = "", column = 4;
                var titles = ['ID', "描述", "类型", 'up']
                var fields = ['sid', "text", "type", 'up']
    
                //starting
    
                var text = '<table><thead><tr>'
                for (var i = 0; i < column; i++) {
                    text = text + '<td>';
                    text = text + titles[i]
                    text = text + '</td>'
                }
                text = text + '</tr></thead><tbody>'
                for (var index in results) {
                    text = text + '<tr>'
                    for (var i = 0; i < column; i++) {
                        text = text + '<td>' + results[index][fields[i]] + '</td>';
                    }
                    text = text + '</tr>'
                }
                text = text + '</tbody></table>'
                console.log(text)
                $("#div1").append(text)
                // document.getElementById("div1").append();
    
                // var data = xhr.responseXML;
                // document.getElementById("div1").innerHTML = data;
                // document.getElementById("div1").innerHTML = JSON.parse(data);
    
            }
        }
    
    
        xhr.open("GET", "https://api.apiopen.top/getJoke?page=1&count=10&type=video", true);
        xhr.send();
        // JSON.parse(data);
    }
    ***/


    // /***
    //practice

    /*
    function myfun() {
        var xhr = new XMLHttpRequest;
        // var onreadystatechange = function () {  //这里好像还是不是很理解为啥要写这个函数；
        xhr.onreadystatechange = function () {   //用xhr这个对象里面的方法；
            if (xhr.readyState == 4 && xhr.status == 200) {
                var data_1 = xhr.responseText;
                var data_1_Json = JSON.parse(data_1);
                // document.getElementById("div1").innerHTML = data_1_Json;  //如何将数据渲染到页面上？
                //从这里我就不会写了；
                //拿到json数组里面的数据；
                var results_1 = data_1_Json.result;  //取到数据result里面的数组这个值；result 的数组；
                //把这个值以列表的形式渲染到页面上；先显示一个；
                var titles = ["id", "文本", "类型", "名字"];  //这是表头，出现在表格的最上面一行；
                var fileds = ["sid", "text", "type", "name"];
                //开始建表格了
                var text = '<table><tr>';
                //for循环遍历数组
                for (var i = 0; i < titles.length; i++) {
                    text = text + '<th>';
                    // text = text + titles.[i]; 低级错误
                    text = text + titles[i];
                    text = text + '</th>';
                }//表头循环完了；
                // var text = '</table></tr>'; 错误
                text = text + '</tr>';
                //开始循环表里面的数据，for 循环遍历数组
                for (var index in results_1) {
                    text = text + '<tr>';
                    for (var i = 0; i < titles.length; i++) {
                        // text = text + <td>;
                        //     text = text + results_1.[index].[fileds[i]];
                        //     text = text + </td>;
                        // text = text + '<td>' + results_1.[index].[fileds[i]] + '</td>';低级错误
                        text = text + '<td>' + results_1[index][fileds[i]] + '</td>';
                    }
                    text = text + '</tr>';
    
                }
                text = text + '</table>';
                // console.log(text);
                $(function () {
                    $("#div1").append(text);
                });
    
    
            }
        }
        xhr.open("GET", "https://api.apiopen.top/getJoke?page=4&count=7&type=video", "true");
        xhr.send();
    }
    //循环写的不通顺，写少了；
    //json取值，基础功不劳；
    // ***/

    // function myfun_1() {
    //     var xhttp = new XMLHttpRequest();
    //     xhttp.onreadystatechange = function () {   //就绪状态准备函数
    //         if (this.readyState == 4 && this.status == 200) {  //这里为啥要用this 用 xhttp 可以吗？
    //             // var data = xhttp.responseText;
    //             myfun_12(this);
    //         }
    //     };
    //     xhttp.open("GET", "https://api.apiopen.top/getJoke?page=1&count=2&type=video", "true");
    //     xhttp.send();
    // }

    // function myfun_12(xml) {
    //     var i;   // 是用来循环数组的；
    //     var xmlDoc = xml.responseXML;
    //     var table = "<tr><th>Artist</th><th>Title</th></tr>";
    //     var x = xmlDoc.getElementByTagName("CD");
    //     for (i = 0; i < x.length; i++) {
    //         table += "<tr><td>" +
    //             x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
    //             "</td><td>" +
    //             x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
    //             "</td></tr>";
    //     }
    //     document.getElementById("demo").innerHTML = table;
    // }


    //three
    //首先从服务器那里获取数据

    /*
    function myfun_2(page, count) {
        // var xhr = XMLHttpRequest; 错误
        var xhr = new XMLHttpRequest;
        // var xhr.onreadystatechange = function () {
        // }
    
        //onreadystatechange是一个事件，就和onclick事件一样；
        //当 readystate状态改变后，会触发 on..change事件
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var data = xhr.responseText;
                // document.getElementById("div3").innerHTML = data;
                // alert(data);
                //开始拼字符串表格    首先从服务器拿到的数据是字符串，字符串要解析成json对象
                var data_2 = JSON.parse(data);
                var th = ["id", "文本", "类型", "名字"];
                var text = "";
                //拼接thead;
                text += '<table><thead><tr>';
                for (var i = 0; i < th.length; i++) {
    
                    text += '<th>' + th[i] + '</th>';
    
                }
                text += '</tr></thead>';
    
                //拼接 tbody
                text += '<tbody>';
                // var data_2 = JSON.parse(data); 开始循环这里的数据了；
                for (var i = 0; i < data_2.result.length; i++) {
                    text += '<tr>';
                    //错误写法
                    // text += '<td>' + data_2.result['sid'] + '</td>';
                    // text += '<td>' + data_2.result['text'] + '</td>';
                    // text += '<td>' + data_2.result['type'] + '</td>';
                    // text += '<td>' + data_2.result['name'] + '</td>';
                    text += '<td>' + data_2.result[i].sid + '</td>';
                    text += '<td>' + data_2.result[i].text + '</td>';
                    text += '<td>' + data_2.result[i].type + '</td>';
                    text += '<td>' + data_2.result[i].name + '</td>';
    
                    text += '</tr>';
                }
                text += '</tbody>' + '</table>';
                document.getElementById("div3").innerHTML = text;
    
            }
        }
        //发送请求
        xhr.open("GET", "https://api.apiopen.top/getJoke?page=" + page + "&count=" + count + "&type=video", "true");
        xhr.send();
    }
    
    */

    /*
    function myfun_3() {
        var xhr = new XMLHttpRequest;
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var data_3 = xhr.responseText;
                var data_3_json = JSON.parse(data_3);  //解析了这个数据
                var message = ["id", "文本", "类型", "名字", "操作"];
                var fields = ['sid', 'text', 'type', "name", 'btn']
                var text = '';
                // text += '<div class = "table"><div class = "theader dis_flex">';
                text += '<div class="d-flex bg-dark text-white">'
                for (var i = 0; i < message.length; i++) {
                    text += '<div class = "flex-1">' + message[i] + '</div>';
                }
                text += '</div>'
                // text += '</div>';
                for (var i = 0; i < data_3_json.result.length; i++) {
                    if (i % 2 === 0) {
                        text += '<div class="d-flex bg-primary  text-white">';
                    } else {
                        text += '<div class="d-flex bg-secondary text-white">';
                    }
    
                    // text += '<div>' + data_3_json.result.sid + '</div>';
                    // text += '<div>' + data_3_json.result.text + '</div>';
                    // text += '<div>' + data_3_json.result.type + '</div>';
                    // text += '<div>' + data_3_json.result.name + '</div>';
                    for (var j = 0; j < fields.length; j++) {
                        if (fields[j] === 'btn') {
                            text += '<div class="d-flex justify-content-center"><a class="text-info">修改</a><a class="text-danger">删除</a></div>'
                        } else {
                            text += '<div class="flex-1">' + data_3_json.result[i][fields[j]] + '</div>';
                        }
                    }
    
                    // text += '<div>' + data_3_json.result[i].text + '</div>';
                    // text += '<div>' + data_3_json.result[i].type + '</div>';
                    // text += '<div>' + data_3_json.result[i].name + '</div>';
    
    
                    text += '</div>';
                }
                // text += '</div>';
                document.getElementById("div3").innerHTML = text;
            }
    
    
        }
        xhr.open("GET", "https://api.apiopen.top/getJoke?page=1&count=20&type=video", true);
        xhr.send();
    }
    
    
    */

    /*
    实现搜索功能，当输入关键字后点击搜索后，上面的数据显示出带有关键字的数据；
0.（请求API,返回了数据， 数据存放全局）

1. 输入字段，点击搜索，搜索获取输入与；（输入字段，点击搜索，按钮获取输入的内容）
        
2. 从获取的api里面的值中获取关键字；（从全局数据里，过滤出含有搜索框内容的记录）

3. 把关键字的api渲染在页面上；（把过滤后的记录重渲染到页面）

Q: 怎样寻找一页内的关键字还是整个api里面的关键字？
*/


    //这个是那个拼接的表格给单独拿出来了；因为我们点击按钮时需要再次调用这个符合调节的表；
    //这个表是筛选后的表，我们要调用这个表；
    // 4

    function render(results) {
        var title = ["id", "文本", "类型", "名字"];
        var fileds = ["sid", "text", "type", "name"];
        var text = "";
        //table thead tr 里面是标题
        text += '<div class = "table-striped"><div><div class="d-flex justify-content-around ">';
        //标题用for 循环来写；
        for (var i = 0; i < title.length; i++) {
            text += '<div>' + title[i] + '</div>';
        }
        //  /thead tbody
        text += '</div><div>';
        //for 循环 ajax里面的数据
        for (var i = 0; i < results.length; i++) {
            // text += '<div>' + results[i].sid + '</div>';
            // text += '<div>' + results[i].text + '</div>';
            // text += '<div>' + results[i].type + '</div>';
            // text += '<div>' + results[i].name + '</div>';
            text += '<div class="d-flex justify-content-around ">';
            for (var j = 0; j < fileds.length; j++) {
                // text += '<div>' + results[title].fileds[j] + '</div>';
                text += '<div>' + results[i][fileds[j]] + '</div>';
            }
            text += '</div>';

        }
        //   /tbody  /table
        text += '</div></div>';
        $("#div4").html(text);
    }

    //通过ajax取数据，然后以表格的形式显示在浏览器上；
    function myfun_4(page, pageSize) {
        var xhr = new XMLHttpRequest;
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var data_4 = xhr.responseText;
                var data_4_json = JSON.parse(data_4);
                var results = data_4_json.result;
                filted_data = results;
                // render(filted_data)
                var title = ["id", "文本", "类型", "名字"];
                var fileds = ["sid", "text", "type", "name"];
                var text = "";
                //table thead tr 里面是标题
                text += '<div class = "table-striped"><div><div class="d-flex justify-content-around ">';
                //标题用for 循环来写；
                for (var i = 0; i < title.length; i++) {
                    text += '<div>' + title[i] + '</div>';
                }
                //  /thead tbody
                text += '</div><div>';
                //for 循环 ajax里面的数据
                for (var i = 0; i < results.length; i++) {
                    // text += '<div>' + results[i].sid + '</div>';
                    // text += '<div>' + results[i].text + '</div>';
                    // text += '<div>' + results[i].type + '</div>';
                    // text += '<div>' + results[i].name + '</div>';
                    text += '<div class="d-flex justify-content-around ">';
                    for (var j = 0; j < fileds.length; j++) {
                        // text += '<div>' + results[title].fileds[j] + '</div>';
                        text += '<div>' + results[i][fileds[j]] + '</div>';
                    }
                    text += '</div>';

                }
                //   /tbody  /table
                text += '</div></div>';
                $("#div4").html(text);
            }
        }
        xhr.open("GET", "https://api.apiopen.top/getJoke?page=" + page + "&count=" + pageSize + "&type=video", true);
        xhr.send();
    }

    //分页功能
    /*
    $(".page-link").click(function (e) {
        e.preventDefault() // ???
        if (this.text === '上一页') {   //这里好像是传递的那个参数；如果传递的第一个参数的是 上一页的话
            if (currentPage === 1) {
                alert("别翻了没有页了");
                return;
            }
            else if (currentPage === 2) {
                // currentPage === 2, 点击上一页，currentPage = 1, 1高亮；
                $(".page-item").removeClass("active");
                $(".page-link-1").parent().addClass("active"); //那这是给 1 高亮 
                currentPage = currentPage - 1;  //那么就当前也 -1 
            } else {
                // 如 currentPage = 4, 点击上一页， currentPage = 3, 3高亮，其他的也要变，由 3 4 5 变为 2 3 4;
                currentPage = currentPage - 1;  //那么就当前也 由4-3，以下的每个值都改变；
                $(".page-link-1").text(currentPage - 1);  //这个是
                $(".page-link-2").text(currentPage);     //这个是当前的值 text()里面写值可以赋值；
                $(".page-link-3").text(currentPage + 1);

                //中间需要高亮 先移除所有高亮，再给中间添加高亮 注意：添加高亮是给parent添加的

                $(".page-item").removeClass("active");
                $(".page-item-2").addClass("active");
            }
        } else if (this.text === '下一页') {
            //如果当前点击的是 下一页 初始状态那么高亮会移到第二个，点击多次要从 3 4 5 - 4 5 6
            currentPage = currentPage + 1;
            $(".page-link-1").text(currentPage - 1);
            $(".page-link-2").text(currentPage);
            $(".page-link-3").text(currentPage + 1);

            $(".page-item").removeClass("active");
            $(".page-item-2").addClass("active");


            // currentPage = currentPage + 1;
            // $(".page-link-1").text(currentPage - 1);
            // $(".page-link-2").text(currentPage);
            // $(".page-link-3").text(currentPage + 1);

            // $(".page-item").removeClass("active");
            // $(".page-item-2").addClass("active");
        } else {
            //点击中间的话 点哪儿高亮移到哪儿 点了不起作用，
            //1. 高亮要加在parent上 2. 当前页是字符串，你需要转换把字符串转换成数字，用parseIn()函数；

            // $(".page-item").removeClass("active");
            // $(this).addClass("active");
            currentPage = parseInt(this.text);
            $(".page-item").removeClass("active");
            $(this).parent().addClass("active");

            // currentPage = parseInt(this.text);  //既不是上一页，也不是下一页，那就等于当前也；"
            // $(".page-item").removeClass("active");
            // $(this).parent().addClass("active");
        }
        //显示了当前页，那怎么办呢？ 为什么这样调用？这一步是干嘛的？????
        myfun_4(currentPage, currentSize);
    });
    */


    /*
    $(".page-link").click(function () {
        //如果当前页是 上一页
        // if ($(".page-link").text === "上一页") {
        //this 当前获取的是 page-link x 
        //在 html中，this 指的是接收该事件的元素；这里指的是 <a></a>这个元素，而不是 page-link
        //如果 a 元素的 text 文本内容是 “上一页” 的话; 
        // 再判断 当前页的是在第几页
        if (this.text === "上一页") {
            if (currentPage === 1) {
                alert("甭点了");
                return;
            } else if (currentPage === 2) {
                //第二页高亮 点击上一页的话 第二页高亮去调，第一页高亮起来；
                //这里有点不会做了；
                //1. 搜先移除所有高亮； page-item
                $(".page-item").removeClass("active");
                //2. 给 currentPage === 1 的 parent()添加高亮 将高亮添加到 1 上
                $(".page-link-1").parent().addClass("active");
                // $(".page-link-2").addClass("active");
                // 3. 当前页 -1
                currentPage = currentPage - 1;
                // $(".page-link").moveClass("active");
                // $(".page-link-1").addClass("active");uix
            } else {
                // c = 5
                currentPage = currentPage - 1;  //4  点击上一页，中间要变成 4， 要 -1，当前页为 4；
                //中间高亮，其他的在 456 -> 345
                //这里也是不会些了

                //页码的固定  里面就是 text 值改变，所以要用到 text 属性
                $(".page-link-1").text = currentPage - 1; //3
                $(".page-link-2").text = currentPage;      // 4
                $(".page-link-3").text = currentPage + 1;  // 5

                //设置高亮  这个一般是咋整的还不知道；
                $("this").moveClass("active");
                $(".page-link-2").addClass("active");
            }

        }//如果当前页是 中间页
        else if (this.text === "下一页") {


        }
        //如果当前页是 下一页

        else {

        }


    });
*/


    /*********************************** */
    /*
        //这里貌似都不需要 a 标签,我为啥加了一个 a 标签？？
        $(".page-link").click(function () {
            if (this.text === '上一页') {
                if (currentPage === 1) {
                    alert("不要点啦");
                    return;
                } else if (currentPage === 2) {
                    //当前页在第2页，点击上一页后，当前页变为第一页，所以要 -1
                    currentPage = currentPage - 1;
                    $(".page-item").removeClass("active");
                    $(".page-link-1").parent().addClass("active");
                } else {
                    //当前页在第4（345）页，那么点击上一页后，当前页-1 （234）
                    currentPage = currentPage - 1;
                    //当前值 345 变为 234
                    $(".page-link-1").text(currentPage - 1);
                    $(".page-link-2").text(currentPage);
                    $(".page-link-3").text(currentPage + 1);
    
                    //移除高亮和添加高亮
                    $(".page-item").removeClass("active");
                    $(".page-link-2").parent().addClass("active");
                }
    
            } else if (this.text === '下一页') {
                //这里就不用分 1 2 3 了
                currentPage = currentPage + 1;
                $(".page-link-1").text(currentPage - 1);
                $(".page-link-2").text(currentPage);
                $(".page-link-3").text(currentPage + 1);
    
                //高亮
                $("page-item").removeClass("active");
                $("page-link-2").parent().addClass("active");
            } else {
                //点击中间页 1 2 3 修改当前页，给当前页高亮
                // $("this").text(currentPage);     x
                //$("this").removeClass("active");  x
                //$("this").parent().addClass("active");  x this 怎能用做字符串呢？
    
                currentPage = parseInt(this.text);
                $(".page-item").removeClass("active");
                $(this).parent().addClass("active");
    
            }
            //所有做好之后再调用函数；
            myfun_4(currentPage, currentSize);
        });
    
        //每页10条
        $("#sel1").change(function (e) {
            currentSize = parseInt(e.target.value);
            myfun_4(currentPage, currentSize);
        });
    
        myfun_4(currentPage, currentSize);
    
    
        //搜索功能
        // $(".btn").click(function () {
        $(".btn").on('click', function () {  //找到那个按钮 并进行点击事件；2种写法：$(".btn").click(function(){}); $(".btn").on("click","function(){}");
            //点击按钮后，获取输入框的值，和 调用那个表格（筛选后的），并把它展示出来；
            var x = $("#input").val();  //定义一个变量 x ，取 输入框所输入的值；var x = $("#input").val();
            var filtered = [];     //定义了一个filtered 变量，里面存储数组；
            filtered = filted_data.filter(function (one) {  //filter 过滤方法；filted_data是定义的一个全局变量空数组
                // if (one.text.indexOf(x) > -1) {  //过滤出  indexOf();事件和 includes() 事件????
                if (one.text.includes(x)) {   //如果 one.text ?? 这个传入的这个参数的文本包括输入的字段，那返回 true , 否则返回false
                    return true;              //那到底这里传入什么参数呢？？？
                } else {
                    return false;
                }
            })
            render(filtered); //然后把上面的返回结果传入表格参数；显示到浏览器上；
        });
        $(".btn").click(function () {
            var x = $("#input").val();
            var filtered = [];   //为啥定义一个数组，为啥这个接收的是数组？？
            filtered = filted_data.filter(function (one) {  //为啥需要参数？
                if (one.text.includes(x)) {
                    return true;
    
                } else {
                    return false;
                }
            });
            //返回 true  和 false 又有什么用呢？
    
        });
    
        $(".btn").click(function () {
            var x = $("#input").val();
            var filtered = [];
            filtered = filted_data.filter(function (f) {
                if (f.text.includes(x)) {
                    return true;
                } else {
                    return false;
                }
    
            });
            render(filtered);
    
        });
        //e.target.value;
        $("#input").on('input', function (e) {
            // var x = $("#input").val();   
            var x = e.target.value;
            var filtered = []
            filtered = filted_data.filter(function (one) {
                // if (one.text.indexOf(x) > -1) {
                if (one.text.includes(x)) {
                    return true;
                } else {
                    return false;
                }
            })
            render(filtered);
        });
    
    */
    /****************************** */


    //5 分页跳动

    /*
    $(".page-link").click(function () {
        //如果当前页的下一页为 1 ，则alert(); X
        // 如果当前页的是 上一页，则 alert();
        if (this.text === "上一页") {  //点击上一页 2种情况：1. 没到顶，继续翻；2.到顶了 无页
            // alert("无 页");
            if (currentPage === 1) {
                alert("无 页");
            }
            else if (currentPage === 2) {
                currentPage = currentPage + 1;
            }
            else {
 
            }
        }
        else if (this.text == "下一页") {
            //因为不知道多少页，所以继续往下翻；但是翻的时候 高亮在中间，且中间的数字要变动；
            currentPage = currentPage + 1;  //?????
            $(".page-link-1").text(currentPage - 1);
            $(".page-link-2").text(currentPage);
            $(".page-link-3").text(currentPage + 1);
        }
        else {
            //中间页 解析当前页；
            currentPage = parseInt(this.text);  //????parseInt 解析数字这个字符串，把它返回成整数；当前的这个页
 
        }
        //显示当前页 再次调用函数?????
        myfun_5(currentPage, currentSize);
    });
 
    */

    $(".btn").click(function () {
        $("#di4").load("https://api.apiopen.top/getJoke?page=1&count=2&type=video");
    });

    $("#add").click(function () {
        $.ajax({
            url: "http://localhost:8081/user/add",
            contentType: "application/json", //必须这样写
            dataType: "json",
            type: "POST",
            data: JSON.stringify({ "name": $("#name").val(), "age": 45 }),
            success: function () {
                alert("OK");
            }
        })
    })

});

/*
function myfun_5(countPage, countSize) {
    var xhr = new XMLHttpRequest;
    xhr.onreadystatechange = function () {
        // if (readyState == 4 && status == 200) {
        if (xhr.readyState == 4 && xhr.status == 200) {

            var data = xhr.responseText;
            var data_5 = JSON.parse(data);

            var text = "";
            var title = ["id", "文本", "类型", "名字"];
            // var fileds = ["sid", "text", "type", "name"];

            text += '<div><div><div class="d-flex justify-content-around ">';
            //table tr
            for (var i = 0; i < title.length; i++) {
                text += '<div>' + title[i] + '</div>';
            }
            text += '</div>';
            //循环 ajax里面的数据
            for (var i = 0; i < data_5.result.length; i++) {
                text += '<div class="d-flex justify-content-around ">';
                text += '<div>' + data_5.result[i].sid + '</div>';
                text += '<div>' + data_5.result[i].text + '</div>';
                text += '<div>' + data_5.result[i].type + '</div>';
                text += '<div>' + data_5.result[i].name + '</div>';
                text += '</div>';
            }
            // document.getElementById("div5").innerHTML = text;
            $("#div5").html(text);

        }
    }
    xhr.open("GET", "https://api.apiopen.top/getJoke?page=1&count=2&type=video", "true");
    xhr.send();
}

*/

